<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-comeOn-edit" th:object="${comeOn}" enctype="multipart/form-data">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
			<input id="picPath" name="picPath" th:field="*{picPath}" class="form-control" type="hidden">
			<input id="type" name="picPath" th:field="*{type}" class="form-control" type="hidden">
			<input id="linkPath" name="picPath" th:field="*{linkPath}" class="form-control" type="hidden">

			<div class="form-group">	
				<label class="col-sm-3 control-label">名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" th:field="*{name}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group" id="count">
				<label class="col-sm-3 control-label">公告内容：</label>
				<div class="col-sm-8">
					<input id="noticeContent" name="noticeContent"  type="hidden">
					<input id="Content" name="noticeContent" th:field="*{content}" type="hidden">
					<div id="editor" class="summernote"></div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">启用状态</label>
				<div class="col-sm-8">
					<div class="input-group" style="width: 100%">
						<select name="status" class="form-control m-b" th:field="*{status}" th:value="*{status}" lay-verify="required">
							<option th:selected="${status=='1'}" value="1">不启动</option>
							<option th:selected="${status=='0'}" value="0">启动</option>
						</select>
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">排序：</label>
				<div class="col-sm-8">
					<input id="sort" name="sort" th:field="*{sort}" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">上传</label>
				<div class="col-sm-8">
					<div class="action">
						<div class="new-contentarea tc">
							<input type="file" onchange="xmTanUploadImg(this)" name="avatar" id="avatar" />
							<img id="xmTanImg"  style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;">
							<video src="" id="vedio" controls style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;">
							</video>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="row">
			<div class="col-sm-offset-5 col-sm-10">
				<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
				<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
			</div>
		</div>
    </div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
	<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
    <script type="text/javascript">
		var prefix = ctx + "system/comeOn";
		var type=$("#type").val();
        var id=""
		if(type==0){
            $("#count").hide();
            $("#xmTanImg").hide();
            id="vedio";
            var vedio = document.getElementById("vedio");
            vedio.src="/profile/avatar/"+$("#linkPath").val();

		}else {
            $("#vedio").hide();
            id="xmTanImg";
            var img = document.getElementById("xmTanImg");
            img.src="/profile/avatar/"+$("#picPath").val();
		}

        $(function() {
            $('.summernote').summernote({
                height : '220px',
                lang : 'zh-CN',
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files[0], this);
                    }
                }
            });
            var content = $("#Content").val();
            $('#editor').summernote('code', content);
        });


        // 上传文件
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }

		$("#form-comeOn-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});


        //判断浏览器是否支持FileReader接口
        if (typeof FileReader == 'undefined') {
            document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
            //使选择控件不可操作
            document.getElementById("avatar").setAttribute("disabled", "disabled");
        }
        //选择图片，马上预览
        function xmTanUploadImg(obj) {
		    if(type==0){
                paht=prefix+"/vedio"
                $.ajax({
                    url:paht,
                    type : "POST",
                    async: false,
                    cache: false,  //此处设置false
                    contentType: false,//必须设置false ,formupload1表单中必须设置enctype="multipart/form-data"
                    processData: false,  //必须设置fals
                    data :new FormData(document.getElementById("form-comeOn-edit")),
                    success:function (data) {
                        var vedios = document.getElementById("vedio");
                        vedios.src="/profile/avatar/"+data;
                    },
                })
			}else {
                var file = obj.files[0];

                console.log(obj);console.log(file);
                console.log("file.size = " + file.size);  //file.size 单位为byte

                var reader = new FileReader();

                //读取文件过程方法
                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function (e) {
                    console.log("成功读取....");

                    var img = document.getElementById(id);
                    img.src = e.target.result;
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(file)
			}
        }

        function submitHandler() {
            var sHTML = $('.summernote').summernote('code');
            $("#noticeContent").val(sHTML);
            paht=prefix+"/edit";
            $.ajax({
                url:paht,
                type : "POST",
                async: false,
                cache: false,  //此处设置false
                contentType: false,//必须设置false ,formupload1表单中必须设置enctype="multipart/form-data"
                processData: false,  //必须设置fals
                data :new FormData(document.getElementById("form-comeOn-edit")),
                success:function (data) {
                    $.operate.successTabCallback(data);
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {

                }
            })
        }
	</script>
</body>
</html>
